<template>
    <div class="demon" v-if="store.count.length > 0">
        <div>已选条件:</div>
        <div class="demon_two">
          <div class="demon_cox" v-for="item in store.count" :key="item">
            {{ item.name }}
            <span style="margin-right: 15px" v-for="ele in item.value" :key="ele">
              <span v-if="item.name == '地区：'" v-for="lll in ele.name" :key="lll" style="margin-right: 3px">
                <span v-for="aa in lll" :key="aa">{{ aa }}</span></span>
              <span v-else-if="item.name == '公告类型：'" v-for="ll in ele.name" :key="ll" style="margin-right: 3px">{{
    ll
  }}</span>
              <span v-else>{{ ele.name }}</span>
            </span>
            <div class="demon_icp" @click="demiconClick(item)">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="demon_three" @click="removals">
          <span class="demon_three-span">清空</span>
          <el-icon :size="14">
            <Delete />
          </el-icon>
        </div>
      </div>
</template>

<script setup>
import { useRadio1Store, useSearchStore } from "@/pain/search/search";
const store = useSearchStore();

let $emit = defineEmits(["removalsS","demiconClickS"]);

const removals = () => {
    $emit("removalsS");
};

const demiconClick = (item) => {
    $emit("demiconClickS",item);
};

</script>

<style lang="scss" scoped>
.demon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px 15px 20px;

  .demon_two {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .demon_cox {
      position: relative;
      margin: 3px 0 0 15px;
      padding: 5px 10px;
      // background-color: #e6e9ff;
      background: #fde8bf;
      border-radius: 50px;
      font-size: 14px;
      color: #f78c16;

      .demon_icp {
        position: absolute;
        top: 6.5px;
        right: 6.5px;
      }
    }
  }

  .demon_three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 34px;
    background-color: #ffe2e2;
    color: #ff4848;
    border-radius: 50px;
    cursor: pointer;

    .demon_three-span {
      margin-right: 5px;
    }
  }
}
</style>